<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web盒子模型</title>
    <!--盒子模型  概念:一个矩形区域，内容包裹在盒子中。盒子的堆叠与嵌套形成整个页面的内容排布。
作用
1. 页面内容的容器。
2. 通过盒子与盒子的嵌套、堆叠，控制页面内容的展示位置（布局）。
 盒子模型从内向外由内容区域大小（width、height），内边距（padding），边框（border），外边距（margin）组成。
盒子模型的各项属性:
  大小:大小控制的是盒子内容区域的大小，通过width和height属性分别控制内容区域的宽度和高度。请注意，盒子模型内容区域是用于盛放元素的，这里的width和
height是css中的属性，不是元素的属性。
使用方法：.myText {width: 500px;height: 400px;
  边框
边框可分为四个部分：上边框、右边框、下边框、左边框。我们可以通过以下三个属性，调整边框的宽度、线型、颜色：
1. 边框宽度：border-width
2. 边框样式（线型）：border-style；请注意，某些边框样式，需要在边框宽度大于某个值的时候，才能拥有较好的视觉表现。边框样式：none(不显示边框，默
认值)、dotted（点线）、dashed（虚线、短线）、solid（实线）、double（双直线）、groove（凹型线）、ridge（凸型线）、inset（嵌入式）、outset（嵌
出式）
3. 边框颜色：border-color

1. 站在属性的角度看边框的四个部分：
/* 一次性调整边框的四个部分 */
border-width: 5px;
/* 上下 左右 */
border-width: 5px 6px;
/* 上 左右 下 */
border-width: 5px 6px 7px;
/* 上 右 下 左 */
border-width: 5px 6px 7px 8px;
/* border-style和border-color同理 */
2. 站在边框的角度看自己的三个属性：
border-top: 6px double yellowgreen;
border-bottom: yellow solid;
border-left: ridge 6px;
border-right: 6px;
/* 未设置的属性，将会采用默认值 */
/* 如果四条边使用的属性都相同，则采用这样的复合写法 */
border: 5px solid #ff55ff;
-->
    <style>
     .myText{background-color: rgba(175, 8, 150,0.5);
    width:100px;
    height:50px;
    /*border-width:10px 20px;
    border-color:rgb(20, 255, 102) rgb(18, 158, 42) rgb(1, 88, 20) #068342;
    border-style:double solid ridge dashed;
    border-radius:50%*/
    /*border:10px double purple*/
    border-top:10px red double;
    border-right:6px rgb(60,30,90) ridge ;
    border-bottom: 8px yellow solid;
    border-left: 7px blueviolet dashed;}
    
    
    
    </style>
</head>
<body>
    <p class="myText">妲己嫦娥海月甄姬大乔</p>
</body>
</html>